<template>
  <div class="preview-mask">
    <div
      class="icon-cloce el-icon-close"
      @click="handleClose()"></div>
    <div class="preview-wrapper">
      <div class="preview-cont">
        <img :src="imgSrc" alt="">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    imgSrc: {
      type: String,
      default: ''
    }
  },
  data () {
    return {

    }
  },
  methods: {
    handleClose () {
      this.$emit('handleClose')
    }
  }
}
</script>
<style lang="stylus" scoped>
.preview-mask
  display flex
  justify-content center
  align-items center
  background rgba(0,0,0, 0.5)
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  z-index 3000
  .icon-cloce
    position absolute
    top: 30px;
    right 34px
    width: 20px;
    height: 20px;
    font-size 26px
    color #fff
    cursor pointer
  .preview-wrapper
    padded_box(border-box, 16px 20px)
    border-radius 6px
    background #fff
    .preview-cont
      img
        min-height 300px
        max-width 50vw
        max-height 50vh
</style>
